<template>
  <view
    class="f-money-box"
    :class="original ? 'f-money-original' : ''"
    :style="[{ padding: padding, margin: margin, fontSize: size + 'rpx', color: color }]"
  >
    <view v-if="rmb">
      <text class="f-money-text" v-if="showUnit">{{ rmbUnit }}</text>
      <text class="f-money-text">{{ rmbText }}</text>
    </view>
    <view v-else>
      <text class="f-money-unit" :style="[{ fontSize: unitSize + 'rpx' }]" v-if="showUnit && unitPosition == 'left'">{{
        unit
      }}</text>
      <text class="f-money-text">{{ moneyData }}</text>
      <text
        class="f-money-decimal"
        :style="[{ fontSize: decimalSize + 'rpx' }]"
        v-if="showZeroDecimal || decimalData != '00'"
        >.{{ decimalData }}</text
      >
      <!-- <text class="f-money-unit" v-if="showUnit && unitPosition=='right'">{{ unitText }}</text> -->
      <text class="f-money-unit" :style="[{ fontSize: unitSize + 'rpx' }]" v-if="showUnit && unitPosition == 'right'">{{
        unit
      }}</text>

      <!-- <text class="f-money-suffix"  :style="[{fontSize:suffixSize+ 'rpx'}]" v-if="suffixText">{{ suffixText }}</text> -->
    </view>
  </view>
</template>

<script>
/*
	 <!-- 默认显示 -->
	 <f-money :money="52013.14"></f-money>
	 <!-- 加大主字体 -->
	 <f-money :money="9168.45" :size="48"></f-money>
	 <!-- 改变颜色 -->
	 <f-money :money="4168.25" :size="38" color="#9397a4"></f-money>
	 <!-- 删除线 -->
	 <f-money :money="7168.39" color="#9397a4" original></f-money>
	 <!-- 千分位 -->
	 <f-money :money="16852013.14" thousandth></f-money>
	 <!-- 人民币大写 -->
	 <f-money :money="502.00" rmb></f-money>
	 */
export default {
  name: 'tMoney',
  props: {
    money: {
      type: Number,
      default: 0.0,
    },
    //padding
    padding: {
      type: String,
      default: '0',
    },
    margin: {
      type: String,
      default: '0',
    },
    //文字大小 rpx
    size: {
      type: Number,
      default: 28,
    },

    color: {
      type: String,
      default: '#e41f19',
    },
    // 单位符号
    unit: {
      type: String,
      default: '¥',
    },
    // 是否显示单位
    showUnit: {
      type: Boolean,
      default: true,
    },
    //单位位置
    unitPosition: {
      type: String,
      default: 'left', // right
    },
    // 是否显示0小数
    showZeroDecimal: {
      type: Boolean,
      default: true,
    },
    // 千分位
    thousandth: {
      type: Boolean,
      default: false,
    },
    // 是否显示删除线
    original: {
      type: Boolean,
      default: false,
    },
    // 是否显示人民币
    rmb: {
      type: Boolean,
      default: false,
    },
    // 单位大小
    unitSize: {
      type: Number,
      default: 28,
    },
    // 大小
    decimalSize: {
      type: Number,
      default: 28,
    },
    //后缀
    // suffixText: {
    // 	type: String,
    // 	default: null
    // },
    // suffixSize : {
    // 	type: Number,
    // 	default: 28
    // },
  },
  data() {
    return {
      moneyData: '0',
      decimalData: '00',
      unitText: '元',
      rmbUnit: '人民币',
      rmbText: '',
    };
  },
  watch: {
    money(val) {
      this.splitMoney();
    },
    unit(val) {
      if ('$' == val) {
        this.rmbUnit = '美金';
        this.unitText = '美元';
      } else if ('£' == val) {
        this.rmbUnit = '英镑';
        this.unitText = '镑';
      } else if ('€' == val) {
        this.rmbUnit = '欧元';
        this.unitText = '欧';
      } else if ('₩' == val) {
        this.rmbUnit = '韩元';
        this.unitText = '韩元';
      } else {
        this.rmbUnit = '人民币';

        this.unitText = '元';
      }
    },
  },
  created() {
    this.splitMoney();
  },
  methods: {
    splitMoney: function () {
      var m = this.money;
      if (!m) {
        m = 0.0;
      }
      var p = m.toFixed(2).toString();
      if (p.indexOf('.') > -1) {
        var pps = p.split('.');
        this.moneyData = pps[0];
        this.decimalData = pps[1];
      } else {
        this.moneyData = p;
        this.decimalData = '00';
      }
      if (this.thousandth) {
        this.moneyData = parseInt(this.moneyData).toLocaleString();
      }
      if (this.rmb) {
        this.toRmb();
      }
    },
    toRmb: function () {
      const fraction = ['角', '分'];
      const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      const unit = [
        ['圆', '万', '亿'],
        ['', '拾', '佰', '仟'],
      ];
      let num = Math.abs(parseFloat(this.money));
      let s = '';
      fraction.forEach((item, index) => {
        s += (digit[Math.floor(num * 10 * 10 ** index) % 10] + item).replace(/零./, '');
      });
      s = s || '整';
      num = Math.floor(num);
      for (let i = 0; i < unit[0].length && num > 0; i += 1) {
        let p = '';
        for (let j = 0; j < unit[1].length && num > 0; j += 1) {
          p = digit[num % 10] + unit[1][j] + p;
          num = Math.floor(num / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
      }

      this.rmbText = s
        .replace(/(零.)*零圆/, '圆')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零圆整');
    },
  },
};
</script>

<style lang="scss" scoped>
/* font start */
@font-face {
  font-family: 'moneyFont';
  src: url('./f-money.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* font end */
/* color start*/
.f-money-box {
  box-sizing: border-box;
  font-family: moneyFont, 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: inline-flex;
  align-items: flex-end;
  justify-items: flex-end;
  justify-content: flex-start;

  .f-money-unit {
    font-size: 28rpx;
    margin: 0;
    padding: 0;
  }

  .f-money-text {
    margin: 0;
    padding: 0;
  }

  .f-money-decimal {
    font-size: 30rpx;
    margin: 0;
    padding: 0;
  }
}
.f-money-original {
  text-decoration: line-through;
}
</style>
